@extends('backend::common.common_right')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox-title">
                    <form role="form" class="form-inline text-center">
                        <div class="checkbox m-l m-r-xs">请选择分类：
                            <select class="form-control catsshow" id="cat_id1">
                                <option value="0">全部</option>
                                @foreach($cats as $ca)
                                    <option @if($cat_id1 == $ca->id) selected
                                            @endif value="{{$ca->id}}">{{$ca->catname}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="checkbox m-l m-r-xs">
                            <label class="i-checks" style="width:150px;">
                                <input style="width:100%;" type="file" id="images" name="files" multiple="true">
                            </label>
                        </div>
                        <button class="btn btn-primary btn-sm" onclick="mapupload()" type="button">上传</button>
                    </form>
                    <form method="get" action="{{url('backend/map/6/0')}}">
                        <div class="input-group col-md-3">
                            <input type="text" placeholder="请输入标题" name="title"
                                   class="form-control">
                            <span class="input-group-btn">
                                     <button type="submit" class="btn  btn-primary"> 搜索</button>
                                     </span>
                        </div>
                    </form>
                </div>

                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table table-striped table-bordered table-hover " id="editable">
                            <thead>
                            <tr>
                                <th>贴图编号</th>
                                <th>贴图名称</th>
                                <th>贴图封面</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            @foreach($maps as $ma)
                                <tr class="gradeX">
                                    <td>{{$ma->id}}</td>
                                    <td>{{$ma->title}}</td>
                                    <td><img src="{{asset('/imagecache/small/'.$ma->image)}}"></td>
                                    <td class="center">
                                        <a href="{{url('backend/mapcreate',['id'=>$ma->id])}}"><i
                                                    class="fa fa-pencil"></i>编辑</a>&emsp;
                                        <a href="javascript:;" onclick="del({{$ma->id}})"><i class="fa fa-trash"></i>删除</a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        {{ $maps->links() }}
                    </div>
                </div>
            </div>
        </div>
        <script>
            var del = function (id) {
                layer.confirm('确定删除么(不可恢复)？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    window.location.href = "{{url('backend/mapdel')}}/" + id;
                }, function () {

                });
            }
            $('#cat_id1').change(function () {
                var catid1 = $(this).children('option:selected').val();
                window.location.href = "{{url('backend/map')}}/6/" + catid1;
            })
            var mapupload = function () {
                if ($("#cat_id1").val() != 0) {
                    var filelist = $('#images')[0].files;
                    if (filelist.length > 0) {
                        for (var i = 0; i < filelist.length; i++) {
                            mapaetherupload(filelist[i], 'image').success(someCallback).upload()
                        }
                    } else {
                        layer.alert('请选择贴图（可多选）', {icon: 5});
                    }
                } else {
                    layer.alert('请选择分类后在上传', {icon: 5});
                }

            }
            someCallback = function () {
                var img = new Image();
                var data = {};

                var img_callback = this;
                img.src = '{{asset('storage')}}/' + img_callback.savedPath;
                img.onload = function () {
                    data.widehigh = img.width + '*' + img.height;
                    data._token = '{{csrf_token()}}';
                    data.title = img_callback.fileName;
                    data.image = img_callback.savedPath;
                    data.cat_id1 = $("#cat_id1").val();
                    $.ajax({
                        url: "/backend/mapedit",
                        type: "POST",
                        data: data,
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            var item = `<tr class="gradeX">
                                <td>${res.id.id}</td>
                                <td>${res.id.title}</td>
                                <td><img src="/imagecache/small/${res.id.image}"></td>
                                <td class="center">
                                <a href="/backend/mapcreate/${res.id.id}"><i class="fa fa-pencil"></i>编辑</a>&emsp;
                                <a href="javascript:;" onclick="del(${res.id.id})"><i class="fa fa-trash"></i>删除</a>
                            </td>
                            </tr>`
                            $('#tbody').prepend(item);
                        },
                    });
                };
            }
        </script>

@endsection

